<template>
    <!-- 页面右侧 内容 -->

    <!-- 卡片 -->
    <el-card>
        <!-- 卡片的顶部 -->
        <template #header>
            <h3>员工列表</h3>
        </template>
        <!-- 搜索区 -->
        <el-form :inline="true" :model="query">
            <el-form-item label="账号">
                <el-input v-model="query.account" placeholder="账号"  />
            </el-form-item>
            <el-form-item label="手机号">
                <el-input v-model="query.telephone" placeholder="手机号"  />
            </el-form-item>
            <el-form-item label="昵称">
                <el-input v-model="query.nickname" placeholder="昵称"  />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="search">搜索</el-button>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="dialogFormVisible = !dialogFormVisible">添加</el-button>
            </el-form-item>
        </el-form>
        <!-- 表格区 -->
        <el-table :data="tableData" border stripe>
            <el-table-column prop="id" label="id"></el-table-column>
            <el-table-column prop="account" label="账号"></el-table-column>
            <el-table-column prop="telephone" label="手机号"></el-table-column>
            <el-table-column prop="nickname" label="昵称"></el-table-column>
            <el-table-column prop="is_del" label="状态">
                <template #default="scope">
                    <span v-if="scope.row.isDel == 0">正常</span>
                    <span v-else-if="scope.row.isDel == 1">禁用</span>
                    <span v-else-if="scope.row.isDel == 2">离职</span>
                </template>
            </el-table-column>
            <el-table-column prop="role" label="身份"></el-table-column>
            <el-table-column label="操作">
                <template #default="scoped">
                    <el-button type="primary" @click="change(scoped.row)">修改</el-button>
                    <el-button type="danger" @click="deleteEmp(scoped.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页区 -->
        <template #footer>
            <!-- <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[5, 10, 15, 20]"
                layout="total, prev, pager, next" :total="tatal" @size-change="handleSizeChange"
                @current-change="handleCurrentChange" /> -->
                <el-pagination
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :page-sizes="[10, 20, 30, 40]"
      layout="total, sizes, prev, pager, next, jumper"
      :total=tableData.length
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />    
        </template>
    </el-card>
    <!-- 添加的弹窗 -->
    <el-dialog  :title="title" v-model="dialogFormVisible" >
        <el-form :model="emp">
            <el-form-item label="账号">
                <el-input v-model="emp.account" placeholder="账号" />
            </el-form-item>
            <el-form-item label="密码">
                <el-input v-model="emp.password" placeholder="密码" />
            </el-form-item>
            <el-form-item label="电话号">
                <el-input v-model="emp.telephone" placeholder="电话号" />
            </el-form-item>
            <el-form-item label="昵称">
                <el-input v-model="emp.nickname" placeholder="昵称" />
            </el-form-item>
            <el-form-item label="角色">
                <el-input v-model="emp.role" placeholder="昵称" />
            </el-form-item>
            <el-form-item label="状态" >
                <el-radio-group v-model="emp.isDel">
                    <el-radio value="0">正常</el-radio>
                    <el-radio value="1">禁用</el-radio>
                    <el-radio value="2">离职</el-radio>
                </el-radio-group>
            </el-form-item>
        </el-form>
        <template #footer>
            <el-button type="primary" @click="dialogFormVisible = !dialogFormVisible">取消</el-button>
            <el-button type="primary" @click="addEmp">提交</el-button>
        </template>

    </el-dialog>
    <!-- 修改的弹窗 -->
    <el-drawer v-model="drawer" title="修改员工">
        <el-form :model="emp">
            <el-form-item label="账号">
                <el-input v-model="emp.account" placeholder="账号" />
            </el-form-item>
            <el-form-item label="密码">
                <el-input v-model="emp.password" placeholder="密码" />
            </el-form-item>
            <el-form-item label="电话号">
                <el-input v-model="emp.telephone" placeholder="电话号" />
            </el-form-item>
            <el-form-item label="昵称">
                <el-input v-model="emp.nickname" placeholder="昵称" />
            </el-form-item>
            <el-form-item label="角色">
                <el-input v-model="emp.role" placeholder="昵称" />
            </el-form-item>
            <el-form-item label="状态">
                <el-radio-group v-model="emp.isDel">
                    <el-radio value="0">正常</el-radio>
                    <el-radio value="1">禁用</el-radio>
                    <el-radio value="2">离职</el-radio>
                </el-radio-group>
            </el-form-item>
        </el-form>
        <template #footer>
            <el-button type="primary" @click="changeEmp">提交修改</el-button>
        </template>    
    
    </el-drawer>




</template>

<script>
import axios from 'axios';

import qs from 'qs';

export default {

    data() {
        return {
            // 弹窗相关数据
            dialogFormVisible: false,
            drawer: false,
            title:"添加员工",
            //弹窗员工数据
            emp: {
                account: "",
                telephone: "",
                nickname: "",
                password: "",
                role: "",
                isDel: ""
            },

            // 分页相关数据
            currentPage: 1,
            pageSize: 40,
            // 搜索相关数据
            searchData: {},
            // 表格相关数据
            tableData: [],
            //搜索数据
            query:{}

        }
    },
    methods: {
        //加载页面函数
        load() {
            axios.get("http://localhost:8080/ele/All").then(res => {
                console.log(res);
                this.tableData = res.data;
            })
        },
        // 添加员工
        addEmp() {
            // axios.post("http://localhost:8080/ele/add",this.emp).then(res=>{
            //     console.log(this.emp);
            //     ElNotification({
            //                 title: "成功",
            //                 message: "删除成功",
            //                 type: "success",})
            // });
            // // 关闭弹窗
            // this.dialogFormVisible=!this.dialogFormVisible,
            // // 刷新数据
            // this.load();
            let xhr = new XMLHttpRequest();
            xhr.open("post", "http://localhost:8080/ele/add");
            xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
            xhr.send(qs.stringify(this.emp));
            console.log(this.emp);
            xhr.onreadystatechange = () => {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    ElNotification({
                        title: "成功",
                        message: "添加成功",
                        type: "success",
                    });
                    //清空表单
                    this.emp = {
                        account: "",
                        telephone: "",
                        nickname: "",
                        password: "",
                        role: "",
                        isDel: ""
                    }
                    // 关闭弹窗
                    this.dialogFormVisible = !this.dialogFormVisible,
                        // 刷新数据
                        this.load();
                }
            }

        },
        // 修改员工弹窗出现
        change(row){
          
            this.drawer=!this.drawer;
            this.emp=row;
        },
        //提交修改的信息
        changeEmp(){
            
            let xhr = new XMLHttpRequest();
            xhr.open("post", "http://localhost:8080/ele/update");
            xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
            xhr.send(qs.stringify(this.emp));
            console.log(this.emp);
            xhr.onreadystatechange = () => {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    ElNotification({
                        title: "修改",
                        message: "修改成功",
                        type: "success",
                    });
                      //清空表单
                      this.emp = {
                        account: "",
                        telephone: "",
                        nickname: "",
                        password: "",
                        role: "",
                        isDel: ""
                    }
                    // 关闭弹窗
                    this.drawer = !this.drawer,
                        // 刷新数据
                        this.load();
                }               
            }
        },
        // 删除员工
        deleteEmp(row){
            let xhr = new XMLHttpRequest();
            xhr.open("get","http://localhost:8080/ele/delete?id="+row.id);
            xhr.send();
            xhr.onreadystatechange=()=>{
                if(xhr.readyState==4&&xhr.status==200){
                    ElNotification({
                        title: "删除",
                        message: "删除成功",
                        type: "success",
                    });
                    // 刷新页面数据
                    this.load();
                }
            }
        },
        //查员工
        search() {
            console.log(this.query);       
            let xhr = new XMLHttpRequest();
            xhr.open("post", "http://localhost:8080/ele/search");
            xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
            xhr.send(qs.stringify(this.query));
            xhr.onreadystatechange = () => {
                if (xhr.readyState ==4 && xhr.status == 200) {
                    this.tableData = JSON.parse(xhr.responseText);
                }
            }
        },
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
        },

    },

    created() {
        console.log('created');
        this.load();
    }
}
</script>

<style scoped></style>